<template>
  <div class="cycle-box">
    <div class="tips-box">
      <p>历史明细最多支持24个月内的历史明细查询</p>
    </div>
    <!--    选择-->
    <div class="select-bill-time">
      <div class="time-picker">
        <p class="left-1">账单周期</p>
        <p class="right-1" @click="timeFlag = !timeFlag">
          <span class="rage-1">2021/01/01</span>
          <span class="line"></span>
          <span class="rage-1">2021/03/30</span>
        </p>
      </div>
      <div class="time-picker type-picker" v-if="isDetail">
        <p class="left-1">类型</p>
        <p class="right-1" @click="timeFlag = !timeFlag">
          <span class="rage-2 active">账单分期</span>
          <span class="rage-2">专项分期</span>
        </p>
      </div>
      <div class="time-picker type-picker" v-if="isDetail">
        <p class="left-1">币种</p>
        <p class="right-1" @click="timeFlag = !timeFlag">
          <span class="rage-2 active">人民币</span>
          <span class="rage-2">美元</span>
        </p>
      </div>

    </div>
    <!--    底部按钮-->
    <div class="bottom-button">
      <div class="left-button">
        重置
      </div>
      <div class="right-button">
        确定
      </div>
    </div>
    <van-popup v-model="timeFlag" position="bottom">
      <van-datetime-picker
          v-model="currentDate"
          type="year-month"
          title="选择年月"
          :min-date="minDate"
          :max-date="maxDate"
          :formatter="formatter"
      />
    </van-popup>
    <van-popup
        v-model="billSelect"
        closeable
        close-icon-position="top-left"
        position="bottom"
        :style="{ 'min-height': '17%' }"
    >
      <div class="amount-list">
        <h3>周期选择</h3>
        <div class="cycle-list">
          <p class="cycle-time">2021年</p>
          <p class="time" v-for="(item, index) in 3" :key="index">
            <span>{{ `${index + 1}月账单` }}</span>
            <span>2021/02/20-2021/03/19</span>
          </p>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import dropdownTop from "@comp/dropdownTop";

export default {
  name: "billCycle",
  components: {
    dropdownTop
  },
  data() {
    return {
      billSelect: false,
      emailValue: "",
      timeFlag: false,
      isDetail:true,
      amountFlag: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(2077, 10, 1),
      currentDate: new Date(),
    };
  },
  methods: {
    formatter(type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    handleTypeCard() {
      const column1 = [
        {text: "普通账单", value: "1"},
        {text: "专项账单", value: "2"}
      ];
      if (!this.picker) {
        this.picker = this.$createPicker({
          data: [column1],
          onSelect: () => {
            console.log(1);
          },
          onCancel: () => {
            console.log("取消");
          }
        });
      }
      this.picker.show();
    }
  }
};
</script>

<style lang="stylus" scoped>
/deep/ .van-cell
  padding 0
  color #333333
  font-size 32px

.cycle-box
  display flex
  width 100%
  flex-direction column
  background #fff
  min-height 100vh
  color #333

  .tips-box
    color #808080
    font-size 26px
    padding 45px 30px

  .bank-card-box
    background #fff

    .item
      display flex
      align-items center
      padding 0 27px 0 33px
      height 90px
      color #333333

      .span-text
        padding 0 16px
        flex 1

        &.active
          color #07B7A0

  .card-right__logo
    width 48px
    height 48px
    display flex
    justify-content center
    margin-left 16px

    img
      width 100%
      height 100%

    .img2
      width 22px
      height 16px

  .select-bill-time
    background #fff
    display flex
    flex-direction column
    justify-content center

    .time-picker
      display flex
      flex-direction column
      align-items baseline
      justify-content space-between
      //height 90px
      margin-left 30px
      padding-right 30px
      padding-bottom 50px
      //border-bottom 2px solid #E6E6E6

      .right-1
        display flex
        padding-top 30px
        width 100%

        .line
          display flex
          width 44px
          align-items center
          margin 16px 0
          color #969799
          font-size 14px
          line-height 24px
          border-color #ebedf0
          border-style solid
          border-width 0
          padding 0 20px

          &:after
            content ''
            display block
            -webkit-box-flex: 1
            -webkit-flex: 1
            flex: 1
            box-sizing: border-box
            height: 1px
            border-color: inherit
            border-style: inherit
            border-width: 1px 0 0
        .rage-2
          display flex
          align-items center
          justify-content end
          height 60px
          border 1px solid #e5e5e5
          padding 0 30px
          border-radius 30px
          color #555555
          margin-right 40px
          &.active
            color #fff
            background #FFA900
            border-color #FFA900
        .rage-1
          display flex
          align-items center
          justify-content end
          flex 1
          height 60px
          border 1px solid #e5e5e5
          padding 0 30px
          border-radius 30px
          color #555555

          &:after
            content ''
            margin-left 10px
            width 0
            height 0
            border-left 12px solid transparent
            border-right 12px solid transparent
            border-top 20px solid #808080

    .time-picker-2
      .right-2
        border none

.bill-box
  background #fff


.line-box
  height 20px
  background #F7F7F7

.amount-list
  h3
    font-weight: 400
    display flex
    align-items center
    justify-content center
    height 100px
    color #666
    border-bottom 1px solid #E6E6E6

  .cycle-list
    color #333333
    font-size 32px

    .cycle-time
      color #666

  .time
    display flex
    align-items center
    justify-content space-between
    padding-right 30px

    span
      &:last-of-type
        color #666

  p
    margin-left 32px
    border-bottom 1px solid #E6E6E6
    display flex
    align-items center
    height 90px
    color #333333
    font-size 32px

.tips
  padding 30px
  font-size 28px

  p
    &:last-of-type
      padding-bottom 30px

  .button
    display flex
    width 686px
    height 88px
    background #FFA900
    border-radius 8px
    color #fff
    font-size 36px
    align-items center
    justify-content center
    margin 30px auto
.bottom-button
  position fixed
  bottom 0
  left 0
  width 100%
  height 88px
  background #FFFFFF
  border 1px solid #E5E5E5
  display flex
  align-items center
  font-size 34px
  color #FFA900

  div
    flex 1
    display flex
    justify-content center
    align-items center
    height 100%

  .right-button
    background #FFA900
    color #fff

</style>
